package io.wongxd.demo.page

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.layout.R
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.google.accompanist.systemuicontroller.rememberSystemUiController
import io.wongxd.solution.baseView.BaseComposeFragment
import io.wongxd.solution.compose.custom.collapsable.CollapsableLayout
import io.wongxd.solution.compose.custom.collapsable.CoverLayout
import io.wongxd.solution.compose.custom.collapsable.rememberCollapsableLayoutState

class FgtCollapsable : BaseComposeFragment() {
    override fun lazyInit() {

    }

    @Composable
    override fun Render() {
        TransparentStatusBar()

        var type by remember {
            mutableStateOf(0)
        }

        if (type and 0x1 == 1)
            TestCollapsableLayout {
                type += 1
            }
        else
            TestCoverLayout {
                type += 1
            }
    }

    @Composable
    fun App() {

        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.Magenta)
                .systemBarsPadding() //同时添加状态栏和导航栏高度对应的上下 padding
//            .statusBarsPadding() //只添加状态栏
//            .navigationBarsPadding()//只添加导航啦
        ) {
            LazyColumn(
                verticalArrangement = Arrangement.spacedBy(22.dp)
            ) {
                items(20) {
                    Text(text = "第 $it 项")
                }
            }
        }
    }

    @Composable
    fun TransparentStatusBar() {
        val systemUiController = rememberSystemUiController()
        val useDarkIcons = !isSystemInDarkTheme()
        SideEffect {
            systemUiController.setStatusBarColor(
                color = Color.Transparent,
                darkIcons = useDarkIcons,
            )
        }
    }

    @Composable
    fun TestCollapsableLayout(click: () -> Unit) {

        val listState = rememberLazyListState()
        val bottomContentScrolled: State<Boolean> = remember {
            derivedStateOf {
                !(listState.firstVisibleItemIndex == 0 && listState.firstVisibleItemScrollOffset == 0)
            }
        }
        val collapsableLayoutState = rememberCollapsableLayoutState()

        CollapsableLayout(

            topContent = {
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(200.dp)
                        .alpha(collapsableLayoutState.expendProgress)
                        .clickable {
                            click.invoke()
                        }
                ) {
                    Image(
                        modifier = Modifier.fillMaxSize(),
                        painter = painterResource(id = io.wongxd.demo.R.drawable.svg_solution_info),
                        contentScale = ContentScale.FillBounds,
                        contentDescription = ""
                    )
                }
            },

            bottomContent = {

                LazyColumn(
                    modifier = Modifier
                        .fillMaxSize()
                        .navigationBarsPadding(),
                    state = listState,
                    verticalArrangement = Arrangement.spacedBy(22.dp)
                ) {
                    items(30) {
                        Text(text = "第 $it 项")
                    }
                }
            },
            bottomContentScrolled = bottomContentScrolled,
            state = collapsableLayoutState
        )
    }

    @Composable
    fun TestCoverLayout(click: () -> Unit) {

        val listState = rememberLazyListState()
        val bottomContentScrolled: State<Boolean> = remember {
            derivedStateOf {
                !(listState.firstVisibleItemIndex == 0 && listState.firstVisibleItemScrollOffset == 0)
            }
        }
        val collapsableLayoutState = rememberCollapsableLayoutState()

        CoverLayout(

            topContent = {
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(200.dp)
                        .alpha(collapsableLayoutState.expendProgress)
                        .clickable {
                            click.invoke()
                        }
                ) {
                    Image(
                        modifier = Modifier.fillMaxSize(),
                        painter = painterResource(id = io.wongxd.demo.R.drawable.svg_solution_info),
                        contentScale = ContentScale.FillBounds,
                        contentDescription = ""
                    )
                }
            },

            bottomContent = {

                LazyColumn(
                    modifier = Modifier
                        .fillMaxSize()
                        .navigationBarsPadding(),
                    state = listState,
                    verticalArrangement = Arrangement.spacedBy(22.dp)
                ) {
                    items(30) {
                        Text(text = "第 $it 项")
                    }
                }
            },
            bottomContentScrolled = bottomContentScrolled,
            state = collapsableLayoutState
        )
    }

    @Preview(showBackground = true, backgroundColor = 0xffffffff)
    @Composable
    fun RenderPreView() {

    }

}